<template>
  <div class="inputClass">
    <label for="checkAll">
      <input id="checkAll" type="checkbox" v-model="checkAll"> 已完成：{{taskTrueSize}}/全部：{{taskMsgs.length}}
    </label>
    <span class="spanClass">
        <button class="buttonClass" @click="deleteAllTrueFloor" v-show="taskTrueSize">清楚所有已完成任务</button>
      </span>
  </div>
</template>

<script>
  export default {
    name: "floor",
    props: {
      taskMsgs: Array,
      deleteAllTrueTask: Function
    },
    methods: {
      //删除所有已完成的任务数
      deleteAllTrueFloor() {
        if (window.confirm("确定要删除所有已完成的任务吗？")) {
          this.deleteAllTrueTask();
        }
      }
    },
    computed: {
      //获取所有已完成的任务数
      taskTrueSize() {
        let total = 0;
        this.taskMsgs.forEach(taskMsg => total += (taskMsg.taskState ? 1 : 0))
        return total;
      },
      //全选或全不选
      checkAll: {
        //判断是否所有的任务已全部勾选，如果都勾选，则全选按钮也为勾选状态
        get() {
          return this.taskTrueSize === this.taskMsgs.length && this.taskMsgs.length
        },
        //value为复选框的值，类型为布尔，如果为true，表示全选
        set(value) {
          //<方式一：props 实现组件之间的通信，1.1
          // this.checkAllTask(value)
          //方式二：@、@emit实现组件之间的通信，通常用于方法(常用)，2.1
          // this.$emit("checkAllTask", value)
          //方式三：@on、@emit实现组件之间的通信，通常用于方法,3.2
          this.$emit("checkAllTask", value)
        }
      }
    }
  }
</script>

<style scoped>
  .inputClass {
    width: 99%;
    height: 50px;
  }

  .buttonClass {
    background-color: mediumvioletred;
    border: 0px;
    border-radius: 5px
  }

  .spanClass {
    float: right;
    padding-right: 10px;
  }
</style>
